<template>
  <div class="goods">
    <van-grid :border="false" :column-num="2">
      <van-grid-item
        v-for="item in newGoodses"
        :key="item.goodsId"
        :to="{
          name: `xiangqin`,
          params: {
            id: item.goodsId,
          },
        }"
        @click="Setid(item.goodsId)"
      >
        <van-image :src="item.goodsCoverImg" />
        <span class="goodsname">{{ item.goodsName }}</span>
        <span class="goodsprice">{{ item.sellingPrice | pricefmt }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getgoodsInfo } from '../../../api/home'
export default {
  props: ['newGoodses'],
  data() {
    return {
      Info: [],
      goodsInfo: {}
    }
  },
  methods: {
    async Setid(id) {
      localStorage.setItem('goodsId', id)
      const res = await getgoodsInfo()
      this.Info = res.data.filter((element) => {
        return element.goodsId === parseInt(id)
      })
      this.goodsInfo = JSON.stringify(this.Info[0])
      localStorage.setItem('goods', this.goodsInfo)
      this.goods = JSON.parse(localStorage.getItem('goods'))
    }
  },
  created() {
    this.Setid(10925)
  }
}
</script>

<style lang="scss">
.goods {
  .van-grid-item {
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    border: 0.5px solid #dcdfe2;
    border-top: none;
    .van-image__img {
      width: 95%;
      height: 85%;
    }
    .goodsprice {
      color: rgba(1, 141, 214, 0.8);
      padding-top: 6px;
      font-size: 15px;
      font-weight: 600;
    }
  }
}
.van-image {
  height: 166px;
}
</style>